<template>
  <p>
    ref：name is {{ person1.name }} age is {{ person1.age }} &nbsp;&nbsp;<button
      @click="changePerson1"
    >
      change person1
    </button>
  </p>
  <p>
    reactive：province is {{ address.province }} city is {{ address.city }}
    <button @click="changeAddress">change address</button>
  </p>
</template>

<script>
import { ref, reactive } from 'vue'
export default {
  // vue3的几乎所有内容，都放在setup函数中
  setup () {
    /**
     * ref：既可以定义简单类型数据、也可以定义复杂类型数据，但是它在js中访问模型数据的时候，要加一个.value
     * reactive：只能定义复杂类型数据，在js中访问模型数据的时候，不需要加.value（因为它没有）
     *
     * ref这个用得很多，因为它不仅仅可以用于定义模型数据（简单、复杂）还可以操作dom，等等之类的
     */
    const person1 = ref({ name: '张三', age: 30 })
    console.log('---person1---', person1)
    const changePerson1 = () => {
      person1.value.name = '李四'
      person1.value.age = 40
    }

    const address = reactive({ province: '江西省', city: '赣州' })
    console.log('---address---', address)
    const changeAddress = () => {
      address.province = '广东'
      address.city = '茂名'
    }

    return {
      person1,
      changePerson1,
      address,
      changeAddress
    }
  }
}
</script>
